<template>
    <el-date-picker v-bind="$helper.deleteKeys($attrs, $helper.keys($props), [])" v-model="model" @change="change"></el-date-picker>
</template>

<script>
    const {getCurrentInstance, toRef, h, ref, onMounted, watch} = Vue;
    const VALUE_FORMAT = {
        DATE: 'date',
        DATESTR: 'datestr',
        TIMESTAMP: 'timestamp',
        MSTIMESTAMP: 'mstimestamp',
    };
    
    export default {
        name:"ByDatePicker",
        
        props: {
            modelValue: {
                default: ""
            },
            
            valueFormat: {
                default: VALUE_FORMAT.DATESTR
            },
        },
        
        setup(props, {slots, emit, attrs}) {
            const {
                /** @type IVueComponentInstance_Ctx */
                ctx
            } = getCurrentInstance();
            
            let model = ref(null);
            let format = (value, isFrom) => {
                let is_date = v => {
                    return v instanceof Date || !v;
                };
                
                if(Object.prototype.toString.call(value) == Object.prototype.toString.call([])) {
                    let ary = [];
                    
                    if(value[0]) {
                        ary.push(format(value[0], isFrom))
                    } else {
                        return [];
                    }
                    
                    if(value[1]) {
                        ary.push(format(value[1], isFrom))
                    }
    
                    return ary;
                }
                
                switch(props.valueFormat) {
                    case VALUE_FORMAT.DATESTR:
                        return isFrom ? (!is_date(value) ? new Date(value) : value) : ctx.$dayjs(value, 'YYYY-MM-DD HH:mm:ss');
                        
                    case VALUE_FORMAT.TIMESTAMP:
                        return isFrom ? (!is_date(value) ? new Date(value*1000) : value) : parseInt(value.getTime()/1000);
                        
                    case VALUE_FORMAT.MSTIMESTAMP:
                        return isFrom ? (!(is_date(value)) ? new Date(value) : value) : value.getTime();
    
                    case VALUE_FORMAT.DATE:
                        return (!is_date(value) ? new Date(value) : value);
                        
                    default:
                        return isFrom ? (!is_date(value) ? new Date(value) : value) : ctx.$dayjs(value, props.modelValue);
                }
            };
            
            let format_from = v => format(v, true);
            let format_to = v => format(v, false);
            
            watch(() => props.modelValue, val => {
                model.value = format_from(val);
            });
    
            model.value = format_from(props.modelValue);
            
            let change = _ => {
                let value = format_to(model.value);
                emit('update:modelValue', value);
                emit('change', value);
            };
            
            return {
                change,
                model
            }
        }
    }
</script>
